4. Keyboard Navigation

• Ensure all interactive elements are reachable and usable via keyboard.

• Use tabindex="0" for custom components that should be focusable.

• Avoid removing outlines for focused elements (outlines help users see where focus is).

• Use logical tab order—elements should be focusable in a way that matches the visual and functional flow of the page.

• Provide visible focus indicators for all focusable elements.

• Use Angular’s @HostListener to handle keyboard events for custom components:

  // Example: Custom button with keyboard support
  @Component({
    selector: "app-custom-button",
    template: `<div tabindex="0" role="button" (click)="onClick()">
      Click Me
    </div>`,
  })
  export class CustomButtonComponent {
    @HostListener("keydown", ["$event"])
    handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Enter" || event.key === " ") {
        this.onClick();
        event.preventDefault();
      }
    }
    onClick() {
      // Button action
    }
  }

• For complex widgets (menus, dialogs, etc.), follow WAI-ARIA Authoring Practices for keyboard interaction patterns.

• Use skip links and landmarks to help keyboard users jump to main content quickly.